<template>
    <a :class="className" class="link--mallki" href="#">
        {{ text }}
        <span :data-letters="text" />
        <span :data-letters="text" />
    </a>
</template>

<script>
    export default {
        props: {
            className: {
                type: String,
                default: '',
            },
            text: {
                type: String,
                default: 'vue-element-admin',
            },
        },
    }
</script>

<style>
    /* Mallki */

    .link--mallki {
        font-weight: 800;
        color: #4dd9d5;
        font-family: 'Dosis', sans-serif;
        -webkit-transition: color 0.5s 0.25s;
        transition: color 0.5s 0.25s;
        overflow: hidden;
        position: relative;
        display: inline-block;
        line-height: 1;
        outline: none;
        text-decoration: none;
    }

    .link--mallki:hover {
        -webkit-transition: none;
        transition: none;
        color: transparent;
    }

    .link--mallki::before {
        content: '';
        width: 100%;
        height: 6px;
        margin: -3px 0 0 0;
        background: #3888fa;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-transition: -webkit-transform 0.4s;
        transition: transform 0.4s;
        -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
        transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }

    .link--mallki:hover::before {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    .link--mallki span {
        position: absolute;
        height: 50%;
        width: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .link--mallki span::before {
        content: attr(data-letters);
        color: red;
        position: absolute;
        left: 0;
        width: 100%;
        color: #3888fa;
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

    .link--mallki span:nth-child(2) {
        top: 50%;
    }

    .link--mallki span:first-child::before {
        top: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    .link--mallki span:nth-child(2)::before {
        bottom: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    .link--mallki:hover span::before {
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
</style>
